<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <label>
                <input type="checkbox" v-model="isMember"> 是否会员
            </label>
            <select v-model="memberLevel" :disabled="!isMember">
                <option value="">请选择会员等级</option>
                <option value="diamond">砖石会员</option>
                <option value="gold">黄金会员</option>
                <option value="silver">白银会员</option>
            </select>
        </div>

        <div>
            <label>数量：<input type="number" v-model.number="quantity" min="1"></label>
            <label>单价：<input type="number" v-model.number="unitPrice" min="1"></label>
        </div>

        <div v-if="memberLevel">
            <p>尊敬的{{ memberLevel === 'diamond' ? '砖石' : memberLevel === 'gold' ? '黄金' : '白银' }}会员，</p>
            <p>你购买的数量是{{ quantity }}，单价是{{ unitPrice }}，折扣是{{ discount }}，总价是{{ totalPrice }}</p>
        </div>
    </div>

    <script>
        const conapp = Vue.createApp({
            data() {
                return {
                    isMember: false,
                    memberLevel: '',
                    quantity: 1,
                    unitPrice: 1
                }
            },
            computed: {
                discount() {
                    if (!this.isMember || !this.memberLevel) return 1;
                    switch (this.memberLevel) {
                        case 'diamond':
                            return 0.5;
                        case 'gold':
                            return 0.7;
                        case 'silver':
                            return 0.8; 
                        default:
                            return 1;
                    }
                },
                totalPrice() {
                    return (this.quantity * this.unitPrice * this.discount).toFixed(2);
                }
            }
        })
        conapp.mount("#app")
    </script>
</body>
</html>
